<template>
  <div class="container">
<Category title="美食">
  <img slot="content" src="./assets/zc.png" alt="">
  <a slot="footer" href="https://www.baidu.com/">跳转</a>
</Category>
<Category title="游戏" :items="games">
  <ul slot="content">
        <li v-for="item,index in this.games" :key="index">{{ item }}</li>
  </ul>
  <a slot="footer" href="https://www.baidu.com/">跳转</a>

</Category>
<Category title="电影">
  <video controls src="./assets/s1.mp4" slot="content"></video>
  <a slot="footer" href="https://www.baidu.com/">跳转</a>
</Category>
  </div>

</template>

<script>
import Category from './components/Category.vue'
export default {
  name: 'App',
  components: {
    Category
  },
  data(){
    return {
      foots:['foot1','foot2','foot3','foot4'],
      games:['game1','game2','game3','game4'],
      films:['film1','film2','film3','film4']
    }
  }
}

</script>
<style>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>